<template>
  <!-- 疾控主页 -->
  <div class="unitHomePage">
    <MyHead :title="homeInfo.name" style="background-color: #f8f8f8"></MyHead>
    <div class="title-box">
      <div class="title">
        <van-icon name="medal" color="#d34f4f " size="30" />
        <div>{{ homeInfo.name }}</div>
      </div>
      <div class="information">{{ homeInfo.introduce }}</div>
    </div>
    <div class="content">
      <van-tabs
        v-model="activeName"
        background="#E8E8E8"
        title-active-color="#F57373"
      >
      <!-- 线下活动 -->
        <van-tab title="线下活动" name="a" style="padding-bottom: 50px">
          <div class="content-box" v-if="this.offlineList.length > 0">
            <div
              class="item-box flexb"
              v-for="(item, index) in offlineList"
              :key="index">
              <div class="left-box">
                <div class="title">
                  <div class="type-box flexc">{{ item.cate_id_text }}</div>
                  <div class="title-name">{{ item.title }}</div>
                </div>
                <div>活动时间：{{ item.start_time_text }}~{{ item.end_time_text }}</div>
              </div>
              <div class="right-box" v-if="item.endtime * 1000 > current_time">
                <van-button
                  round
                  type="info"
                  color="#F57373"
                  @click="goOffline(item)"
                  >查看</van-button>
              </div>
              <div class="right-box" v-else>
                <van-button
                  round
                  type="info"
                  color="#999999"
                  @click="onFinish(item)"
                  >已结束</van-button>
              </div>
            </div>
          </div>
          <div v-else>
            <van-empty description="暂无活动" />
          </div>
        </van-tab>
        <van-tab title="防艾资讯" name="b" style="padding-bottom: 50px">
          <div class="content-box" v-if="this.messageList.length>0">
            <div
              class="item-box flexb"
              v-for="(item, index) in messageList"
              :key="index"
            >
              <div class="left-box">
                <div class="title">
                  <div class="title-name">{{ item.title }}</div>
                </div>
                <div>活动时间：{{ item.create_time }}</div>
                <div>活动单位：{{ item.depart_name }}</div>
              </div>
              <div class="right-box">
                <van-button
                  round
                  type="info"
                  color="#F57373"
                  @click="viewMessage(item)"
                  >查看</van-button>
              </div>
            </div>
          </div>
          <div v-else>
            <van-empty description="暂无资讯" />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      headTitle: "",
      jKongInfo: {},
      activeName: "a",
      offlineList: [],
      messageList: [],
      depart_code: "",
      homeInfo: {},
      current_time: 0,
    };
  },
  computed: {},
  methods: {
     /*已结束*/ 
     onFinish(item){
      console.log(item,'结束');
      this.$toast('活动已结束了哟！！！')
    },
    /*获取主页信息*/
    async departmentdetail() {
      let res = await this.$ajax.getDepartmentdetail({
        openid: this.openid,
        depart_code: this.depart_code,
      });
      if (res.code == 1) {
        this.homeInfo = res.data;
      } 
    },
    /*线下活动*/
    async getOfflineList(){
      let res = await this.$ajax.actSigninList({
        openid:this.openid,
        level:"2",
        appoint_code:this.depart_code
      })
      if (res.code ==1) {
        this.offlineList = res.data;
      }
    },
    /*线下活动（查看）*/ 
    goOffline(item){
      var s = item.depart_code + '-'+item.id;
      this.$router.push({name:"eventDetails",query:{s:s}});
    },
    /*防艾资讯*/
    async departmentinformations() {
      let res = await this.$ajax.getdepartmentinformations({
        openid: this.openid,
        depart_code: this.depart_code,
      });
      if (res.code == 1) {
        this.messageList = res.data.data;
      } 
    },
    /*查看资讯*/
    viewMessage(item){
      this.$router.push({name:"messageDetail",query:{id:item.id}})
    }, 
  },
  mounted() {
    this.headTitle = this.$route.query.title;

    this.depart_code = this.$route.query.depart_code;
    this.current_time = new Date().getTime(); //当前时间戳
    this.getOfflineList(), //线下活动

    this.departmentdetail();
    this.departmentinformations();
  },
};
</script>

<style lang="scss" scoped>


.unitHomePage {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: #f9f9f9;

  .title-box {
    padding: 15px 8px;
    background-color: rgba(255, 244, 244, 1);

    .title {
      display: flex;
      align-items: center;
      color: rgba(16, 16, 16, 1);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      font-weight: bold;
    }

    .information {
      line-height: 25px;
      color: rgba(51, 51, 51, 1);
      font-size: 14px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      font-weight: bold;
    }
  }
  .content-box {
    background: #f9f9f9;
    .item-box {
      display: flex;
      width: 95%;
      line-height: 25px;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 1);
      margin: 17px 8px;
      padding: 10px 12px;
      box-sizing: border-box;

      .left-box {
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        .title {
          display: flex;
          .type-box {
            width: 54px;
            height: 24px;
            border-radius: 4px;
            background-color: rgba(164, 173, 179, 0.1);
            color: rgba(226, 27, 27, 1);
            font-size: 12px;
            font-family: Microsoft Yahei;
            margin-right: 5px;
            font-weight: 500;
          }
          .title-name {
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            font-weight: bold;
          }
        }
      }
      .right-box {
        display: flex;
        justify-content: right;
        align-items: center;
        .van-button {
          width: 80px;
          height: 30px;
          border-radius: 42px;
          background-color: rgba(255, 163, 43, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 12px;
          text-align: center;
          font-family: Microsoft Yahei;
          border: none;
        }
      }
    }
  }
}
</style>